<template>
  <div class="diy-navdesign-body">
    <div class="diy-navdesign-main">
      <div class="diy-navdesign-form" v-loading="initLoading">
        <div class="diy-preview">
          <!-- 底部导航 -->
          <div
            class="diy-preview-buttom-nav-box"
            :style="{ background: diyData.style.bg }"
          >
            <template v-for="(nav, index) in diyData.data" :key="index">
              <div
                class="diy-buttom-nav-item"
                :class="tabCur == index ? 'active' : ''"
                @click="setCur(index)"
              >
                <img
                  :src="tabCur == index ? nav.icon_cur : nav.icon"
                  v-if="diyData.layout.value != 3"
                />
                <div
                  class="text"
                  :style="{
                    color:
                      tabCur == index
                        ? diyData.style.cur_color
                        : diyData.style.color,
                  }"
                  v-if="diyData.layout.value != 2"
                >
                  {{ nav.title }}
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="diy-editor">
          <storeDiyForm :title="diyData.name" :hide="['other']">
            <template #content>
              <storeDiyFormItem label="导航风格">
                <storeDiyFormSelectBtn
                  v-model="diyData.layout.value"
                  :data="layoutData"
                ></storeDiyFormSelectBtn>
              </storeDiyFormItem>
              <el-divider content-position="left">
                <div class="fw">导航数据</div>
              </el-divider>
              <draggable v-model="diyData.data" item-key="index">
                <template #item="{ element }">
                  <storeDiyFormItems>
                    <storeDiyFormItem label="标题">
                      <el-input v-model="element.title" />
                    </storeDiyFormItem>
                    <storeDiyFormItem label="图片">
                      <storeDiyFormImageBtn
                        text="点击设置图片"
                        size="small"
                        v-model="element.icon"
                      >
                      </storeDiyFormImageBtn>
                    </storeDiyFormItem>
                  </storeDiyFormItems>
                </template>
              </draggable>
            </template>
            <template #style>
              <storeDiyFormItem label="背景颜色">
                <storeDiyFormColorBtn v-model="diyData.style.bg" />
              </storeDiyFormItem>
              <storeDiyFormItem
                label="文字颜色"
                v-if="diyData.layout.value != 2"
              >
                <storeDiyFormColorBtn v-model="diyData.style.color" />
              </storeDiyFormItem>
              <storeDiyFormItem
                label="选中颜色"
                v-if="diyData.layout.value != 2"
              >
                <storeDiyFormColorBtn v-model="diyData.style.cur_color" />
              </storeDiyFormItem>
            </template>
          </storeDiyForm>
        </div>
      </div>

      <div class="diy-save">
        <back-btn></back-btn>
        <el-button type="primary" @click="saveClick" :loading="btnLoading"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import draggable from "vuedraggable";
export default defineComponent({
  components: {
    draggable,
  },
});
</script>
<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { getDiyNavdesign, updateDiyNavdesign } from "@/api/store/diy_page";
import { Result, ResultError } from "@/types";
import storeDiyForm from "@/components/diy/form/index.vue";
import storeDiyFormItem from "@/components/diy/form/item.vue";
import storeDiyFormItems from "@/components/diy/form/items.vue";
import storeDiyFormSelectBtn from "@/components/diy/form/select-btn.vue";
import storeDiyFormImageBtn from "@/components/diy/form/image-btn.vue";
import storeDiyFormLinkBtn from "@/components/diy/form/link-btn.vue";
import storeDiyFormCreateBtn from "@/components/diy/form/create-btn.vue";
import storeDiyFormDeleteBtn from "@/components/diy/form/delete-btn.vue";
import storeDiyFormColorBtn from "@/components/diy/form/color-btn.vue";
import {
  diySelectDataType,
  diyNavdesignType,
  diyNavdesignItemType,
} from "@/types";

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const tabCur = ref<number | string>(0);

const diyData = ref<diyNavdesignType>({
  name: "",
  type: "navdesign",
  data: [],
  layout: {
    value: 1,
  },
  style: {
    bg: "#ffffff",
    color: "#000000",
    cur_color: "#000000",
  },
});

const defaultData = ref<diyNavdesignType>(diyData.value);

const initLoading = ref<boolean>(true);

const toInit = () => {
  initLoading.value = false;
};

const toInitDiyData = () => {
  getDiyNavdesign()
    .then((res: Result) => {
      diyData.value = res.data.data;
      defaultData.value = res.data.default;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
      initLoading.value = false;
    });
};

const setCur = (index: number | string) => {
  tabCur.value = index;
};

const layoutData = ref<Array<diySelectDataType>>([
  {
    title: "图文",
    value: 1,
  },
  {
    title: "图片",
    value: 2,
  },
  {
    title: "文字",
    value: 3,
  },
]);

const btnLoading = ref<boolean>(false);

const saveClick = () => {
  btnLoading.value = true;
  updateDiyNavdesign({ navdesign: diyData.value })
    .then((res: Result) => {
      $utils.successMsg(res.message);
      toInit();
      btnLoading.value = false;
    })
    .catch((err: ResultError) => {
      btnLoading.value = false;
      $utils.errorMsg(err);
    });
};

onMounted(() => {
  toInitDiyData();
});
</script>

<style scoped>
.diy-navdesign-body {
  position: absolute;
  top: calc(50% - 410px);
  left: calc(50% - 500px);
}
.diy-navdesign-main {
  height: 820px;
}
.diy-navdesign-form {
  position: relative;
  margin: 0 auto;
  width: 1000px;
  height: 780px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.diy-navdesign-body .diy-preview {
  width: 360px;
  height: 780px;
  font-size: 12px;
  position: relative;
  border: 1px solid var(--el-border-color);
  background: #fff;
}
.diy-navdesign-body .diy-preview-buttom-nav-box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
  background: #ffffff;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  align-items: center;
}
.diy-navdesign-body .diy-preview-buttom-nav-box .diy-buttom-nav-item {
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.diy-navdesign-body .diy-preview-buttom-nav-box .diy-buttom-nav-item img {
  height: 26px;
  width: 26px;
}
.diy-navdesign-body .diy-editor {
  position: relative;
  width: 406px;
  height: 780px;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border: 1px solid var(--el-border-color);
}

.diy-save {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>